<template>
  <a-card :title="title">


    <div ref="chartRef" style="height: 400px"></div>
  </a-card>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch} from 'vue'
import {Column} from '@antv/g2plot';


let plot = null
const chartRef = ref(null)


// 查询条件 查询天数 以及 数据环境设置
const query = reactive({days: 15, real: false})

const title = '人口分布统计'


const initChart = () => {
  plot = new Column(chartRef.value,  {
    data:[],
    xField: 'type',
    yField: 'sales',
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
      },
    },
    meta: {
      type: {
        alias: '类别',
      },
      sales: {
        alias: '销售额',
      },
    },
    minColumnWidth: 20,
    maxColumnWidth: 20,
  })
  plot.render()

}




const loadChartData = async () => {
  const data  = [
    {
      type: '翠屏区',
      sales: 38,
    },
    {
      type: '叙州区',
      sales: 38,
    },
    {
      type: '江安县',
      sales: 52,
    },
    {
      type: '长宁县',
      sales: 61,
    },
    {
      type: '高县',
      sales: 145,
    },
    {
      type: '珙县',
      sales: 48,
    },


    {
      type: '筠连县',
      sales: 38,
    },
    {
      type: '兴文县',
      sales: 38,
    },
    {
      type: '屏山县',
      sales: 38,
    },
  ];
  plot.changeData(data)
}
onMounted(async () => {
  await initChart();
  await loadChartData();
})
watch(query, () => loadChartData())
</script>

